<?php
/**
 * Created by PhpStorm.
 * User: Daniel
 * Date: 2017/12/17
 * Time: 17:41
 */

/* @var $this yii\web\View */
/* @var $form yii\bootstrap\ActiveForm */
/* @var $model app\models\LoginForm */

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

?>

<ol class="breadcrumb">
    <li><a href="/site/index">设备列表</a></li>
    <li><a href="/site/info?deviceId=<?= @$_GET['deviceId'] ?>&deviceName=<?= @urlencode($_GET['deviceName']) ?>">设备:<?= $_GET['deviceName'] ?></a></li>
    <li class="active">历史数据曲线</li>
</ol>

<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

<form class="form-inline" role="form" style="margin-bottom: 10px;">
    <button type="button" class="btn btn-primary m-l-10">选择日期：</button>
    <div class="form-group">
        <div class="input-daterange input-group" id="date-range" >
            <input type="date" class="form-control" name="start" id="dateValue" value="<?php echo @date('Y-m-d')?>"/>
        </div>
    </div>
    <button id="sure" type="button" class="btn btn-success waves-effect waves-light m-l-10">确 定</button>
</form>


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>

    $(function(){
        $("#sure").click(function(){
            $.getJSON('/table/data?deviceId=<?= @$_GET['deviceId'] ?>&start='+$("#dateValue").val(), function (data) {
                chart(data);
            });
        })
    })


    $.getJSON('/table/data?deviceId=<?= @$_GET['deviceId'] ?>', function (data) {
        chart(data);
    });

    function chart(PointData){

        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        Highcharts.stockChart('container', {
            rangeSelector: {
                buttons: [{
                    type: 'all',
                    text: '全天'
                },
                    {
                    count: 1,
                    type: 'hour',
                    text: '1小时'
                }, {
                    count: 5,
                    type: 'hour',
                    text: '5小时'
                }],
                inputEnabled: false,
                selected: 0
            },

            title: {
                text: '设备:<?= @$_GET['deviceName'] ?>'
            },

            exporting: {
                enabled: false
            },

            series: [{
                name: '有效油位百分比',
                data: PointData
            }]
        });
    }
</script>